import { Button, Form, Input, message } from 'antd';
import { useState } from 'react';
import style from './index.module.scss'
import { useNavigate } from 'react-router-dom';
import { observer } from "mobx-react-lite"
import { useStore } from "@/store/index"

const App = () => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('horizontal');
  const onFormLayoutChange = ({ layout }) => {
    console.log(layout)
    setFormLayout(layout);
  };
  const { authStore } = useStore()
  const defaultValue = {
    username: "13811111111",
    password: "246810"
  }

  const navigate = useNavigate()
  const loginFn = async (value) => {
    await authStore.login({ ...value })
    message.destroy()
    message.success("登录成功")
    navigate('/home')
  }
  return (
    <div className={style.login}>
      <Form
        className={style.formBox}
        layout={formLayout}
        form={form}
        initialValues={
          defaultValue
        }
        onValuesChange={onFormLayoutChange}
        style={{
          maxWidth: formLayout === 'inline' ? 'none' : 600,
        }}
        onFinish={loginFn}
      >
        <Form.Item
          label="账号"
          name="username"
          rules={[{ required: true, message: "请输入用户名！" }]}
        >
          <Input size="midle" className={style.input} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          label="密码"
          name='password'
          rules={[{ required: true, message: "请输入密码！" }]}>
          <Input.Password size="midle" className={style.input} placeholder="请输入密码" />
        </Form.Item>
        <Form.Item>
          <Button className={style.btn} htmlType="submit" type="primary">登录</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default observer(App);